<template>
  <div class="foot_wraper">
    <el-row>
      <el-col :span="12">
        <div class="foot_left">
          <div class="foot_left_top">
            <img src="../assets/vue.svg" alt="logo">
            <span class="footLeftTopZi">瞬言时刻</span>
          </div>
          <div class="footLeftBot">
            <p>大家好</p>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="footRight">
          <span class="footRightBotTop">链接</span>
          <p>暂时没有</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
$foot_img_size: 30px;

.foot_wraper {
  width: 100%;
  height: 100px;
  background-color: black;
  position: relative;
  top: 10vh;
  color: white;
  box-sizing: border-box;
  padding: 10px;

  .foot_left {
    height: 100%;
    width: 50%;
    padding: 0 10px 10px 10px;
    position: relative;
    left: 330px;

    img {
      height: $foot_img_size;
      width: $foot_img_size;
    }

    .footLeftTopZi {
      font-size: 14px;
      font-family: '楷体';
      font-weight: bold;
      position: absolute;
      top: 10px;
      left: $foot_img_size*1.8;
    }

    .footLeftBot {
      font-size: 12px;
      margin-top: 10px;
    }
  }

  .footRight {
    .footRightBotTop {
      font-size: 20px;
      font-family: '楷体';
      font-weight: bold;
    }
    p{
      font-size: 13px;
      color: rgb(214, 255, 255);
      margin-top: 10px;
    }
  }
}
</style>